<template>
	<div v-if="value" class="modal">
		<div class="scroll-bar-custom wrap" :style="{width:width}">
			<header>{{title}}<i class="iconfont" @click="onCancel">&#xe6f3;</i></header>
			<slot></slot>
			<footer>
				<button class="btn btn-default" @click="onConfirm">确定</button>
				<button class="btn btn-default btn-cancel" @click="onCancel">取消</button>
			</footer>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			'title':{type:String},
			'width':{type:String},
			'value':{type:Boolean}
		},
		methods:{
			onConfirm(){
				this.$emit('confirm')
			},
			onCancel(){
				this.$emit('cancel')
				this.$emit('input',false)
			}
		}
	}
</script>

<style lang="scss">
	.modal{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		.wrap{
			background: #fff;
			padding: 40px;
			border-radius: 5px;
			width: 400px;
			max-height: 80%;
		}
		header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 20px;
			margin-bottom: 40px;
			i{
				cursor: pointer;
				opacity: 0.2;
				font-size: 26px;
			}
		}
		footer{
			margin-top: 40px;
			.btn{
				margin-right: 10px;
			}
			.btn-cancel{
				border: 0;
			}
		}
		textarea{
			font-family: 'Avenir', Helvetica, Arial, sans-serif;
		}
	}
	.modal-input,.modal-select{
		border: 0;
		width: 100%;
		margin: 1em 0;
		border-bottom: solid 1px #ccc;
		padding: .5em 0;
		outline: 0;
	}
</style>
